// 首页的样式less文件
@import "common";
@fonta: 50px;

// @import "common";导入less文件，可以把一个样式文件导入到另一个样式文件里面
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #f2f2f2;
}

* {
  margin: 0;
  padding: 0;
}


.ad {
  display: none;
  position: absolute;
  width: 15rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  z-index: 9999;

  .close {
    width: (50rem / @fonta);
    height: (50rem / @fonta);
    position: absolute;
    top: 0%;
    right: 5%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: (50rem / @fonta);
    border-radius: 50%;
    border: 3px solid white;
    font-weight: 400;
    color: white;
  }

  .center {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: (660rem / @fonta);
    height: (718rem / @fonta);

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.sn_new {
  width: (100rem / @fonta);
  height: (145rem / @fonta);
  position: fixed;
  right: 0;
  top: 30%;
  border-radius: (12rem / @fonta);
  z-index: 999;

  &:nth-child(2) {
    width: (100rem / @fonta);
    height: (145rem / @fonta);
    position: fixed;
    right: 0;
    top: 45%;
    border-radius: (12rem / @fonta);
    z-index: 999;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.top_btn {
  display: none;
  width: (100rem / @fonta);
  height: (100rem / @fonta);
  position: fixed;
  right: 0;
  top: 80%;
  border-radius: (12rem / @fonta);
  z-index: 999;

  img {
    width: 100%;
    height: 100%;
  }
}

nav {

  width: 15rem;
  height: (180rem / @fonta);
  background-color: #f2af76;

  .head-img {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    width: (682rem / @fonta);
    height: (88rem / @fonta);

    .img_1 {
      width: (36rem / @fonta);
      height: (60rem / @fonta);
      margin-top: (5rem / @fonta);

      img {
        display: block;
        width: 100%;
        height: 100%;
      }

    }

    .img_2 {
      width: (570rem / @fonta);
      height: (88rem / @fonta);

      img {
        display: block;
        margin: 0 auto;
        width: (390rem / @fonta);
        height: (76rem / @fonta);
      }
    }

    .img_3 {
      width: (36rem / @fonta);
      height: (60em / @fonta);
      margin-top: (5rem / @fonta);

      img {
        display: block;
        width: 100%;
        height: 100%;
      }

    }

  }


  // 导航板块二

  .search {
    width: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: (92rem / @fonta);
    box-sizing: border-box;
    padding: (5rem / @fonta);
    background: #f5af74;


    .search-box {
      position: relative;
      margin: 0 auto;
      width: (702rem / @fonta);
      height: (68rem / @fonta);
      margin: (8rem / @fonta) (12rem / @fonta);
      border-radius: (36rem / @fonta);
      background-color: #fff;

      i {
        position: absolute;
        top: 50%;
        left: (40rem / @fonta);
        transform: translate(-50%, -50%);
        color: gainsboro;
        font-size: (35rem / @fonta);
      }

      input {
        position: absolute;
        top: 0;
        left: (75rem / @fonta);
        width: (540rem / @fonta);
        height: (64rem / @fonta);
        outline: none;
        border: none;
        color: #030300;
        font-size: (26rem / @fonta);

      }
    }
  }

}

.swiper-wrapper img {
  width: (700rem / @fonta);
  height: (229rem / @fonta);
  border-radius: (15rem / @fonta);
}



// 轮播图
.banner,
.swiper-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: (229rem / @fonta);
  background: url(../img/bg.jpg) no-repeat center;
  background-size: 15rem (229rem / @fonta);
  box-sizing: border-box;
  padding: (10rem / @fonta);

  .img_go,
  .swiper-wrapper {
    width: (700rem / @fonta);
    height: (229rem / @fonta);
    border-radius: (20rem / @fonta);
    margin: 0 auto;

    ul {
      width: (700rem / @fonta);
      height: (229rem / @fonta);

      li {
        list-style: none;
        width: (700rem / @fonta);
        height: (229rem / @fonta);

        img {
          width: (700rem / @fonta);
          height: (229rem / @fonta);
          border-radius: (15rem / @fonta);

        }
      }
    }
  }

  .circle {
    width: 15rem;
    height: (8rem / @fonta);
    position: absolute;
    top: 90%;
    left: 0;
    z-index: 999;
    // background-color: turquoise;

    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15rem;
      height: (8rem / @fonta);

      li {
        margin: (10rem / @fonta);
        width: (9rem / @fonta);
        height: (8rem / @fonta);
        border-radius: 50%;
        color: black;
        z-index: 99;
      }
    }
  }

}

.ad-wrap {

  width: 100%;
  height: 100px;
  margin: 0 auto;

  img {
    margin-top: 8px;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
  }
}

// 图标栏
.icon-img {
  margin-top: 100px;
  width: 15rem;
  height: (308rem / @fonta);
  display: flex;
  flex-direction: column;
  cursor: pointer;

  a {
    text-decoration: none;
    list-style: none;
    color: #666666;

    &:hover {
      color: #ff4422;
    }
  }

  .icon_1 {
    width: 15rem;
    height: ((284rem / @fonta) / 2);
    // background-color: violet;
    display: flex;
    justify-content: center;
    align-items: center;


    li {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      list-style: none;
      height: (142rem / @fonta);
      width: (15rem / 5);

      img {
        display: block;
        margin: (8rem / @fonta) auto;
        width: (84rem / @fonta);
        height: (84rem / @fonta);
      }

      span {
        width: (150rem / @fonta);
        height: (28rem / @fonta);
        color: #666666;
        margin: (5rem / @fonta) 0 0;
        font-size: (24rem / @fonta);
        text-align: center;
        line-height: (28rem / @fonta);
      }
    }
  }


  .icon_2 {
    width: 15rem;
    height: ((284rem / @fonta) / 2);
    // background-color: violet;
    display: flex;
    justify-content: center;
    align-items: center;


    li {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      list-style: none;
      height: (142rem / @fonta);
      width: (15rem / 5);

      img {
        display: block;
        margin: (8rem / @fonta) auto;
        width: (84rem / @fonta);
        height: (84rem / @fonta);
      }

      span {
        width: (150rem / @fonta);
        height: (28rem / @fonta);
        color: #666666;
        margin: (5rem / @fonta) 0 0;
        font-size: (24rem / @fonta);
        text-align: center;
        line-height: (28rem / @fonta);
      }
    }
  }

}

// 图片栏

.img_tab {
  width: (740rem / @fonta);
  height: (234rem / @fonta);
  // background-color: wheat;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .tab_1 {
    flex: 2;
    height: (234rem / @fonta);
    border: transparent;
    border-right: 1px solid white;


    img {
      width: 100%;
      height: 100%;
    }

  }

  .tab_2 {
    flex: 1.1;
    height: (234rem / @fonta);
    border: 1px solid transparent;
    border-left: 1px solid white;
    border-right: 1px solid white;

    img {
      width: 100%;
      height: 100%;
    }

  }

  .tab_3 {
    flex: 1.1;
    height: (234rem / @fonta);
    border-left: 1px solid white;

    img {
      width: 100%;
      height: 100%;
    }

  }
}

// 好货栏
.good {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: (704rem / @fonta);
  height: (516rem / @fonta );
  margin: (35rem / @fonta) auto;
  margin-bottom: (1rem / @fonta);

  .second_kill {
    // border-right: (0.5rem / @fonta) solid #f2f2f2;
    width: (350rem / @fonta);
    height: (258rem / @fonta);
    background-color: #ffffff;
    border-top-left-radius: (16rem / @fonta);

    .font_word {
      display: flex;
      align-items: flex-end;
      width: (350rem / @fonta);
      height: (58rem / @fonta);

      span {
        font-size: (28rem / @fonta);
        margin: (18rem / @fonta) (8rem / @fonta) 0 (24rem / @fonta);
        font-weight: 700;
      }


      .kill_box {
        font-size: (20rem / @fonta);
        display: flex;
        justify-content: center;
        align-items: center;
        width: (130rem / @fonta);
        height: (40rem / @fonta);

        li {
          width: (34rem / @fonta);
          height: (28rem / @fonta);
          text-align: center;
          font-weight: 600;
          background-color: #FFCC00;
          line-height: (28rem / @fonta);
          list-style: none;
          border-radius: (10rem / @fonta);
        }
      }
    }

    p {
      width: (300rem / @fonta);
      height: (30rem / @fonta);
      margin: (4rem / @fonta) 0 0 (24rem / @fonta);
      font-size: (24rem / @fonta);
      color: #999999;
    }

    .kill_imgs {
      display: flex;
      width: (322rem / @fonta);
      height: (149rem / @fonta);
      margin: (5rem / @fonta) 0 0;
      padding: 0 0 0 (28rem / @fonta);

      li {
        list-style: none;
        height: (149rem / @fonta);
        width: ((350rem / @fonta) / 2);

        img {
          display: block;
          width: (120rem / @fonta);
          height: (120rem / @fonta);
        }

        span {
          width: (120rem / @fonta);
          height: (28rem / @fonta);
          display: block;
          text-align: center;
          color: #ff5500;
          font-size: (26rem / @fonta);

          div {
            display: inline-block;
            color: #ff5500;
            font-size: (22rem / @fonta);
          }
        }
      }
    }
  }

  .huiju {
    border-left: (0.5rem / @fonta) solid #f2f2f2;
    width: (350rem / @fonta);
    height: (258rem / @fonta);
    background-color: #ffffff;
    border-top-right-radius: (16rem / @fonta);

    .font_word {
      display: flex;
      align-items: flex-end;
      width: (350rem / @fonta);
      height: (58rem / @fonta);

      span {
        font-size: (28rem / @fonta);
        margin: (18rem / @fonta) (8rem / @fonta) 0 (24rem / @fonta);
        font-weight: 700;
      }


      .kill_box {
        font-size: (20rem / @fonta);
        display: flex;
        justify-content: center;
        align-items: center;
        width: (130rem / @fonta);
        height: (40rem / @fonta);

        li {
          width: (34rem / @fonta);
          height: (28rem / @fonta);
          text-align: center;
          font-weight: 600;
          background-color: #FFCC00;
          line-height: (28rem / @fonta);
          list-style: none;
          border-radius: (10rem / @fonta);
        }
      }
    }

    p {
      width: (300rem / @fonta);
      height: (30rem / @fonta);
      margin: (4rem / @fonta) 0 0 (24rem / @fonta);
      font-size: (24rem / @fonta);
      color: #999999;
    }

    .kill_imgs {
      display: flex;
      width: (322rem / @fonta);
      height: (149rem / @fonta);
      margin: (5rem / @fonta) 0 0;
      padding: 0 0 0 (28rem / @fonta);

      li {
        position: relative;
        list-style: none;
        height: (149rem / @fonta);
        width: ((350rem / @fonta) / 2);

        img {
          display: block;
          // margin: 0 auto;
          width: (120rem / @fonta);
          height: (120rem / @fonta);
        }

        span {

          position: absolute;
          bottom: (-1.5rem / @fonta);
          left: (-15rem / @fonta);
          background: url(../img/BJ1.png);
          background-size: (150rem / @fonta) (54rem / @fonta);
          width: (150rem / @fonta);
          height: (54rem / @fonta);
          display: block;
          text-align: justify;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;


          div {
            width: (150rem / @fonta);
            height: ((58rem / @fonta) / 2);
            display: block;
            color: #333333;
            text-align: center;
            font-size: (20rem / @fonta);
            overflow: hidden;
          }
        }
      }
    }
  }

  .new_product {
    // border-right: (0.5rem / @fonta) solid #f2f2f2;

    width: (350rem / @fonta);
    height: (258rem / @fonta);
    background-color: #ffffff;



    .font_word {
      display: flex;
      align-items: flex-end;
      width: (350rem / @fonta);
      height: (58rem / @fonta);

      span {
        font-size: (28rem / @fonta);
        margin: (18rem / @fonta) (8rem / @fonta) 0 (24rem / @fonta);
        font-weight: 700;
      }


      .kill_box {
        font-size: (20rem / @fonta);
        display: flex;
        justify-content: center;
        align-items: center;
        width: (130rem / @fonta);
        height: (40rem / @fonta);

        li {
          width: (34rem / @fonta);
          height: (28rem / @fonta);
          text-align: center;
          font-weight: 600;
          background-color: #FFCC00;
          line-height: (28rem / @fonta);
          list-style: none;
          border-radius: (10rem / @fonta);
        }
      }
    }

    p {
      width: (300rem / @fonta);
      height: (30rem / @fonta);
      margin: (4rem / @fonta) 0 0 (24rem / @fonta);
      font-size: (24rem / @fonta);
      color: #999999;
    }

    .kill_imgs {
      display: flex;
      width: (322rem / @fonta);
      height: (149rem / @fonta);
      margin: (5rem / @fonta) 0 0;
      padding: 0 0 0 (28rem / @fonta);

      li {
        list-style: none;
        height: (149rem / @fonta);
        width: ((350rem / @fonta) / 2);

        img {
          display: block;
          width: (120rem / @fonta);
          height: (120rem / @fonta);
        }

        span {
          width: (120rem / @fonta);
          height: (28rem / @fonta);
          display: block;
          text-align: center;
          color: #ff5500;
          font-size: (26rem / @fonta);

          div {
            display: inline-block;
            color: #ff5500;
            font-size: (22rem / @fonta);
          }
        }
      }
    }
  }

  .add_buy {
    border-left: (0.5rem / @fonta) solid #f2f2f2;

    width: (350rem / @fonta);
    height: (258rem / @fonta);
    background-color: #ffffff;



    .font_word {
      display: flex;
      align-items: flex-end;
      width: (350rem / @fonta);
      height: (58rem / @fonta);

      span {
        font-size: (28rem / @fonta);
        margin: (18rem / @fonta) (8rem / @fonta) 0 (24rem / @fonta);
        font-weight: 700;
      }


      .kill_box {
        font-size: (20rem / @fonta);
        display: flex;
        justify-content: center;
        align-items: center;
        width: (130rem / @fonta);
        height: (40rem / @fonta);

        li {
          width: (34rem / @fonta);
          height: (28rem / @fonta);
          text-align: center;
          font-weight: 600;
          background-color: #FFCC00;
          line-height: (28rem / @fonta);
          list-style: none;
          border-radius: (10rem / @fonta);
        }
      }
    }

    p {
      width: (300rem / @fonta);
      height: (30rem / @fonta);
      margin: (4rem / @fonta) 0 0 (24rem / @fonta);
      font-size: (24rem / @fonta);
      color: #999999;
    }

    .kill_imgs {
      display: flex;
      width: (322rem / @fonta);
      height: (149rem / @fonta);
      margin: (5rem / @fonta) 0 0;
      padding: 0 0 0 (28rem / @fonta);

      li {
        position: relative;
        list-style: none;
        height: (149rem / @fonta);
        width: ((350rem / @fonta) / 2);

        img {
          display: block;
          // margin: 0 auto;
          width: (120rem / @fonta);
          height: (120rem / @fonta);
        }

        span {

          position: absolute;
          bottom: (-1.5rem / @fonta);
          left: (-15rem / @fonta);
          background: url(../img/BJ1.png);
          background-size: (150rem / @fonta) (54rem / @fonta);
          width: (150rem / @fonta);
          height: (54rem / @fonta);
          display: block;
          text-align: justify;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;


          div {
            width: (150rem / @fonta);
            height: ((54rem / @fonta) / 2);
            display: block;
            color: #333333;
            text-align: center;
            font-size: (20rem / @fonta);
          }
        }
      }
    }
  }
}

// 推荐栏
.selector {
  display: flex;
  width: (702rem / @fonta);
  height: (172rem / @fonta);
  background: #ffffff;
  margin: 0 auto;
  border-bottom-left-radius: (16rem / @fonta);
  border-bottom-right-radius: (16rem / @fonta);
  cursor: pointer;

  .se_head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: (173rem / @fonta);
    height: (172rem / @fonta);

    p {
      &:nth-child(1) {
        font-size: (32rem / @fonta);
        word-wrap: break-word;
        word-spacing: initial;
      }

      &:nth-child(2) {
        font-size: (24rem / @fonta);
        color: #999999;
      }
    }
  }

  .se_tab {
    width: (508rem / @fonta);
    height: (172rem / @fonta);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      list-style: none;
      width: (120rem / @fonta);
      height: (172rem / @fonta);
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-content: center;

      img {
        display: block;
        margin: 0 auto;
        width: (100rem / @fonta);
        height: (100rem / @fonta);
      }

      span {
        width: (120rem / @fonta);
        height: (30rem / @fonta);
        font-size: (22rem / @fonta);
        text-align: center;
        color: #333333;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
    }

  }
}

// 第二导航栏
.fix_search {
  display: none;
  position: fixed;
  top: 0;
  width: 15rem;
  height: (88rem / @fonta);
  background-color: #FFDB47;

  .head-img {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    width: (682rem / @fonta);
    height: (88rem / @fonta);

    .img_1 {
      width: (36rem / @fonta);
      height: (60rem / @fonta);
      margin-top: (5rem / @fonta);

      img {
        display: block;
        width: 100%;
        height: 100%;
      }

    }

    .img_2 {

      width: (522rem / @fonta);
      height: (88rem / @fonta);

      .search-box {
        position: relative;
        margin: 0 auto;
        width: (522rem / @fonta);
        height: (68rem / @fonta);
        margin: (8rem / @fonta) (12rem / @fonta);
        border-radius: (36rem / @fonta);
        background-color: #fff;

        i {
          position: absolute;
          top: 50%;
          left: (40rem / @fonta);
          transform: translate(-50%, -50%);
          color: gainsboro;
          font-size: (35rem / @fonta);
        }

        input {
          position: absolute;
          top: (3rem / @fonta);
          left: (72rem / @fonta);
          width: (430rem / @fonta);
          height: (64rem / @fonta);
          outline: none;
          border: none;
          color: #030300;
          font-size: (26rem / @fonta);

        }
      }
    }

    .img_3 {
      width: (36rem / @fonta);
      height: (60em / @fonta);
      margin-top: (5rem / @fonta);

      img {
        display: block;
        width: 100%;
        height: 100%;
      }

    }

  }
}

// 推荐榜单栏
.tuijian {
  width: 15rem;
  height: (60rem / @fonta);
  cursor: pointer;

  img {
    width: 15rem;
    height: (60rem / @fonta);
  }
}


// 推荐tab栏
.tj_tab {
  width: (702rem / @fonta);
  height: (266rem / @fonta);
  margin: 0 auto;
  // background-color: #ffffff;
  display: flex;
  justify-content: center;
  cursor: pointer;



  .tj_tab1 {

    margin: 0 (6rem / @fonta);
    border-radius: (12rem / @fonta);
    width: (226rem / @fonta);
    height: (266rem / @fonta);
    // background-color: yellow;

    &:nth-child(2) {
      .tj_font {
        background: url(../img/tjbj2.png);
      }
    }

    .tj_img {
      border-top-left-radius: (12rem / @fonta);
      border-top-right-radius: (12rem / @fonta);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: (226rem / @fonta);
      height: (173rem / @fonta);
      background-color: #ffffff;


      img {
        display: block;
        margin: 0 auto;
        width: (150rem / @fonta);
        height: (150rem / @fonta);
      }

      .tj_rank {
        position: absolute;
        bottom: -20%;
        left: 50%;
        width: (100rem / @fonta);
        height: (34rem / @fonta);
        transform: translate(-50%, -50%);
        background-color: #ffffff;

        color: #D9A87A;
        font-size: (22rem / @fonta);
        border: (2rem / @fonta) solid #D9A87A;
        border-radius: (15rem / @fonta);
        text-align: center;
        z-index: 99;
      }

    }

    .tj_font {
      position: relative;
      width: (226rem / @fonta);
      height: (93rem / @fonta);
      background: url(../img/tjbj1.png);
      display: flex;
      flex-direction: column;
      justify-content: center;




      p {
        text-align: center;

        &:nth-child(1) {
          font-size: (31rem / @fonta);
          color: #ffffff;
        }

        &:nth-child(2) {
          font-size: (22rem / @fonta);
          color: #ffffff;

        }
      }
    }
  }
}

// 人气榜
.hot_tab {
  width: (702rem / @fonta);
  height: (481rem / @fonta);
  // background-color: cyan;
  margin: (15rem / @fonta) auto;
  cursor: pointer;

  .hot-box {
    width: (702rem / @fonta);
    height: (481rem / @fonta);
    display: flex;
    flex-wrap: wrap;

    li {
      box-sizing: border-box;
      padding: (21rem / @fonta) 0 (16rem / @fonta) (18rem / @fonta);
      float: left;
      list-style: none;
      width: (350rem / @fonta);
      height: (240rem / @fonta);
      background-color: #fff;
      border: (0.5rem / @fonta) solid #f2f2f2;

      .ht_banner {
        width: (332rem / @fonta);
        height: (32rem / @fonta);
        display: flex;
        justify-content: flex-start;
        align-items: center;

        p {
          width: (182rem / @fonta);
          height: (32rem / @fonta);
          color: #333333;
          font-weight: 700;
          font-size: (26rem / @fonta);
        }

        span {
          margin-left: (14rem / @fonta);
          background-color: #f5f9ee;
          width: (90rem / @fonta);
          height: (28rem / @fonta);
          font-size: (22rem / @fonta);
          text-align: center;
          color: #ab813a;
          border-radius: (15rem / @fonta);
        }
      }

      p {
        font-size: (24rem / @fonta);
        color: #999999;

      }

      .hot_img {
        width: (332rem / @fonta);
        height: (140rem / @fonta);

        img {
          display: inline-block;
          width: (140rem / @fonta);
          height: (140rem / @fonta);

          &:nth-child(2) {
            padding-left: (15rem / @fonta);
          }
        }
      }

    }
  }
}

// 猜你喜欢
.like {
  margin: (10rem / @fonta) auto;
  width: (702rem / @fonta);
  height: (60rem / @fonta);
  cursor: pointer;

  img {
    width: (702rem / @fonta);
    height: (60rem / @fonta);
  }
}

// 商品栏
.flex_goods {
  width: (705rem / @fonta);
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  cursor: pointer;

  .one {
    margin: (5rem / @fonta) (5rem / @fonta);
    width: (342rem / @fonta);
    height: (542rem / @fonta);
    background-color: #ffffff;
    border-radius: (12rem / @fonta);

    img {
      // display: block;
      width: (342rem / @fonta);
      height: (342rem / @fonta);
    }

    p {
      width: (318rem / @fonta);
      height: (69rem / @fonta);
      margin: (18rem / @fonta) (12rem / @fonta) 0;
      font-size: (26rem / @fonta);
      font-weight: 700;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .gs_icon {

      width: (269rem / @fonta);
      height: (24rem / @fonta);
      margin: (11rem / @fonta) (12rem / @fonta) (14rem / @fonta);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        &:nth-child(1) {
          display: block;
          background: url(../img/zy.png);
          width: (48rem / @fonta);
          height: (24rem / @fonta);
          background-size: (48rem / @fonta) (24rem / @fonta);
          margin: 0 (6rem / @fonta) (2rem / @fonta) 0;
        }

        &:nth-child(2) {

          //  width: (80rem / @fonta);
          height: (24rem / @fonta);
          color: #333333;
          margin: 0 (3rem / @fonta) (2rem / @fonta) (2rem / @fonta);
          background-color: #fefbee;
          font-size: (18rem / @fonta);
          text-align: center;
          border-radius: (5rem / @fonta);
          border: 1px solid #ffbb00;
        }

        &:nth-child(3) {
          width: (40rem / @fonta);
          height: (24rem / @fonta);
          color: #333333;
          margin: 0 (3rem / @fonta) (2rem / @fonta) (2rem / @fonta);
          background-color: #fefbee;
          font-size: (18rem / @fonta);
          text-align: center;
          border-radius: (5rem / @fonta);
          border: 1px solid #ffbb00;
        }
      }
    }

    .price {
      width: (330rem / @fonta);
      height: (38rem / @fonta);
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        &:nth-child(1) {
          text-align: center;
          list-style: (28rem / @fonta);
          width: (24rem / @fonta);
          height: (28rem / @fonta);
          font-size: (24rem / @fonta);
          color: #ff4422;
        }
      }

      .rmb {
        text-align: center;
        line-height: (36rem / @fonta);
        width: (80rem / @fonta);
        height: (36rem / @fonta);
        font-size: (36rem / @fonta);
        color: #ff4422;
        font-weight: 700;
      }

      .cstm_pj {
        // height: (37rem / @fonta);
        margin-left: (13rem / @fonta);
        font-size: (20rem / @fonta);
        text-align: center;
        line-height: (37rem / @fonta);
        color: #999999;
      }
    }
  }
}

// 底部图片
.footer {
  width: 15rem;
  height: (173rem / @fonta);

  img {
    width: 15rem;
    height: (175rem / @fonta);
  }
}

// 底部tab栏
.ft_tab {
  position: fixed;
  bottom: 0;

  width: 15rem;
  height: (100rem / @fonta);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  li {
    list-style: none;
    width: (150rem / @fonta);
    height: (100rem / @fonta);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    img {
      width: (48rem / @fonta);
      height: (48rem / @fonta);
      margin: (12rem / @fonta) (51rem / @fonta) 0;
    }

    span {
      text-align: center;
      line-height: (32rem / @fonta);
      width: (150rem / @fonta);
      height: (32rem / @fonta);
      color: #333333;
      font-weight: 600;
      font-size: (20rem / @fonta);
    }
  }

}

.ft_tab2 {
  width: 15rem;
  height: (100rem / @fonta);
}

.dl {

  width: 100%;
  height: 100px;

  img {
    position: fixed;
    cursor: pointer;
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
}

.copyright {
  p {
    font-weight: 700;
    text-align: center;
    font-size: 12px;
  }
}